<template>
  <div class="search-box">
    <!--搜索框-->
    <div class="search-header">
      <!--返回按钮-->
      <a v-link="{path:'/'}" class="search-back btn">
        <i class="iconfont">&#xe602;</i>
      </a>
      <!--input-->
      <input type="text" v-model="keyword" class="search-input" placeholder="请输入您要搜索的关键词"/>
      <div class="search-btn btn" @click="search">
        <i class="iconfont">&#xe600;</i>
      </div>
    </div>
    <!--历史记录列表-->
    <div class="history-box" v-show="!state">
      <ul v-if="history.length">
        <li class="title">搜索历史</li>
        <li v-for="data in history" @click="setKeyword(data)">{{data}}</li>
      </ul>
      <div v-else class="remove-btn">没有搜索记录</div>
      <div v-if="history.length" class="remove-btn" @click="removeHistory">清空历史纪录</div>
    </div>
    <article-list v-show="keyword && state" url="/search" :keywords="keywords" :top="'0.97rem'" :bottom="'0rem'"></article-list>
  </div>
</template>
<script type="text/javascript">
  var article = require("../../components/mobile/article-list.vue");
  export default{
    data(){
      return {
        keyword:"",
        state:false,
        keywords:"",
        history:[]
      }
    },
    components:{
      articleList:article,
    },
    methods:{
      search(){
        if(this.keyword){
          var state  =  true;
          //查看是否重复
          for(var i in this.history){
            if(i == this.keyword){
              return false;
            };
          };
          //本地存储
          if(state){
            this.history.unshift(this.keyword);
            //存储
            localStorage.setItem("history" , JSON.stringify({list:this.history}));
          };
          //执行查找
          this.state = true;
          this.keywords = this.keyword;
        };
      },
      //点击历史搜索
      setKeyword(data){
        this.keywords = data;
        this.keyword = data;
        this.state = true;
      },
      //删除本地存储
      removeHistory(){
        localStorage.removeItem("history");
        this.history = [];
      }
    },
    watch:{
      keyword(val){
        if(!val){
          this.state = false;
        };
      }
    },
    ready(){
      //读取本地存储
      this.history = JSON.parse(localStorage.getItem("history")).list;
    }
  }
</script>
<style scoped>
  .search-box{
    width:100%;
    height:100%;
    position:relative;
  }
  .search-box .search-header{
    width:100%;
    height:0.67rem;
    padding:0.15rem 0;
    line-height:0.67rem;
    border-bottom: 1px solid #f0f0f0;
  }
  .search-box .btn{
    width:0.67rem;
    height:0.67rem;
    box-sizing:border-box;
  }
  /*back*/
  .search-box .search-back{
    float:left;
    padding-left:0.2rem;
    text-align:left;
  }
  .search-box .search-back i{
    position:relative;
    left:-0.1rem;
  }
  .search-box .search-btn{
    float:right;
    padding-right:0.2rem;
    text-align:right;
    color:#2C3030;
    font-weight: 500;
  }
  .search-box i{
    font-size: 0.4rem;
  }
  /*输入框*/
  .search-box .search-input{
    width: 5.94rem;
    height: 0.67rem;
    border: none;
    float: left;
    margin: 0 0.1rem;
    color: #2C3030;
    font-size: 0.3rem;
  }
  /*历史记录*/
  .history-box{
    padding:0 0.2rem;
  }
  .history-box .title{
    color:#505050;
  }
  .history-box li{
    line-height:0.9rem;
    text-align:left;
    text-overflow:ellipsis;
    word-break:break-all;
    overflow:hidden;
    border-bottom: 1px solid #f0f0f0;
  }
  .history-box .remove-btn,
  .history-box li{
    font-size:0.3rem;
    line-height:0.9rem;
    font-weight:500;
  }
  .history-box .remove-btn,
  .history-box li{
    color:#959595;
  }
  .history-box .remove-btn{
    text-align:center;
  }
  .history-box li a:active{
    color: #55bef9;
  }
</style>
